<template>
  <div class="main">
    <h1 class="title">今天吃什么?</h1>
    <div class="hadengd">
      <img :src="getImg('hadeng')"/>
    </div>
    <div class="duckd">
      <img :src="getImg('duck')"/>
    </div>
    <!-- 大转盘 -->
    <lucky-wheel
        ref="myLucky"
        width="600px"
        height="600px"
        :buttons="buttons"
        :blocks="blocks"
        :prizes="prizes"
        @start="startCallback"
        @end="endCallback"
    />
  </div>
  <!--  <button @click="showContent">设置</button>-->
  <a-modal title="设置" v-model:visible="isModalOpen">
    <a-textarea
        v-model:value="prizesText"
        placeholder="输入种类逗号分割"
        style="width: 100%;min-height: 20px"
    />
    <template #footer>
      <a-button key="返回" @click="handleCancel">Return</a-button>
      <a-button key="确定" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import {getCurrentInstance, h, onMounted, ref} from 'vue';
import {Modal} from 'ant-design-vue';

const isModalOpen = ref(false);
const blocks = [{padding: '13px', background: '#dada28'}];
const prizesText = ref("");
let prizes = [
  {fonts: [{text: '五爷拌面', top: '10%', fontColor: '#ffffff'}], background: '#e70c0c'},
  {fonts: [{text: '兰州拉面', top: '10%', fontColor: '#ffffff'}], background: '#e19775'},
  {fonts: [{text: '华莱士', top: '10%', fontColor: '#ffffff'}], background: '#a6ad22'},
  {fonts: [{text: '沙县大酒店', top: '10%', fontColor: '#ffffff'}], background: '#048017'},
  {fonts: [{text: '齐品达', top: '10%', fontColor: '#ffffff'}], background: '#09b952'},
  {fonts: [{text: '马大勺', top: '10%', fontColor: '#ffffff'}], background: '#8a0808'},
  {fonts: [{text: '老汤面馆', top: '10%', fontColor: '#ffffff'}], background: '#080481'},
  {fonts: [{text: '黄焖鸡米饭', top: '10%', fontColor: '#ffffff'}], background: '#c227b6'},
];
const buttons = [
  {radius: '40%', background: '#617df2'},
  {radius: '35%', background: '#dada28'},
  {
    radius: '30%', background: '#dd2178',
    pointer: true,
    fonts: [{text: '开始', top: '-10px'}]
  }
]
let myLucky = ref(null)
onMounted(() => {
  myLucky = getCurrentInstance().refs.myLucky
});
const getImg = (img) => {
  return new URL(`../assets/${img}.png`, import.meta.url).href
};
// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  myLucky.play()
  // 模拟调用接口异步抽奖
  setTimeout(() => {
    const min = 0;
    const max = prizes.length - 1
    // 算法 生成0 到 length - 1 的下角标
    let random = Math.floor(Math.random() * (max - min + 1)) + min
    // 调用stop停止旋转并传递中奖索引
    myLucky.stop(random)
  }, 3000)
};
// 弹窗
const text = ref('')
const visible = ref(false);
const info = (text) => {
  Modal.info({
    content: h('div', {}, [h('p', `今天吃${text}`)]),
    onOk() {
      console.log('ok');
    },
  });
};
// 抽奖结束会触发end回调
const endCallback = (prize) => {
  text.value = prize.fonts[0].text
  info(text.value)
};

const showContent = () => {
  isModalOpen.value = true;
};
window.setting = showContent;

const handleCancel = () => {
  isModalOpen.value = false;
};

const handleOk = () => {
  setTimeout(() => {
    prizes = [];
    prizesText.value.split(",").forEach(p => {
      prizes.push({fonts: [{text: p, top: '10%'}], background: color16()})
    })
    isModalOpen.value = false;
  }, 2000);
};

const color16 = () => {//十六进制颜色随机
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  return '#' + r.toString(16) + g.toString(16) + b.toString(16);
}
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
  background: #7a75e1;
  position: relative;
  justify-content: center;
  align-items: center;

  .hadengd {
    width: 200px;
    object-fit: contain;
    position: absolute;
    bottom: 50px;
    left: 80px;
    animation-name: duckd-wave;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
  }

  .duckd {
    width: 200px;
    object-fit: contain;
    position: absolute;
    bottom: 50px;
    right: 250px;
    animation-name: duckd-wave;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
  }

  .title {
    color: #0f1010;
  }

  .fan {
    width: 150px;
    height: 150px;
    object-fit: contain;
    position: absolute;
    bottom: 180px;
    right: 80px;
  }

  @keyframes duckd-wave {
    0% {
      transform: rotate(0deg);
    }
    10% {
      transform: rotate(-10deg);
    }
    20% {
      transform: rotate(12deg);
    }
    30% {
      transform: rotate(-10deg);
    }
    40% {
      transform: rotate(9deg);
    }
    50% {
      transform: rotate(9deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}
</style>
